import { useState } from 'react'
import { motion } from 'framer-motion'
import { useInView } from 'react-intersection-observer'
import { Mail, Phone, MessageCircle } from 'lucide-react'

const Contact = () => {
  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.1
  })

  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  })

  const [isSubmitting, setIsSubmitting] = useState(false)
  const [showNotification, setShowNotification] = useState(false)
  const [notificationType, setNotificationType] = useState<'success' | 'error'>('success')

  const contactMethods = [
    {
      icon: <Mail size={20} />,
      title: '邮箱支持',
      text: 'support@fudai-ai.com'
    },
    {
      icon: <Phone size={20} />,
      title: '客服热线',
      text: '400-123-4567'
    },
    {
      icon: <MessageCircle size={20} />,
      title: '官方微信',
      text: '红小匠·AI官方'
    }
  ]

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData(prev => ({
      ...prev,
      [name]: value
    }))
  }

  const isValidEmail = (email: string) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return emailRegex.test(email)
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    // 表单验证
    if (!formData.name || !formData.email || !formData.message) {
      setNotificationType('error')
      setShowNotification(true)
      setTimeout(() => setShowNotification(false), 3000)
      return
    }

    if (!isValidEmail(formData.email)) {
      setNotificationType('error')
      setShowNotification(true)
      setTimeout(() => setShowNotification(false), 3000)
      return
    }

    setIsSubmitting(true)

    // 模拟表单提交
    setTimeout(() => {
      setNotificationType('success')
      setShowNotification(true)
      setFormData({ name: '', email: '', message: '' })
      setIsSubmitting(false)
      setTimeout(() => setShowNotification(false), 3000)
    }, 1000)
  }

  return (
    <section id="contact" className="contact">
      <div className="container contact-container">
        <motion.div 
          className="contact-header"
          initial={{ opacity: 0, y: 30 }}
          animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
          transition={{ duration: 0.6 }}
        >
          <h2 className="contact-title">联系我们</h2>
          <p className="contact-subtitle">有任何问题或建议，欢迎随时联系我们，让红小匠·AI为您带来精准的运营指导</p>
        </motion.div>
        
        <motion.div 
          className="contact-content"
          ref={ref}
          initial={{ opacity: 0, y: 50 }}
          animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
          transition={{ duration: 0.8 }}
        >
          <div className="contact-info">
            {contactMethods.map((method, index) => (
              <motion.div 
                key={index}
                className="contact-item"
                initial={{ opacity: 0, x: -30 }}
                animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
              >
                <div className="contact-icon">
                  {method.icon}
                </div>
                <div className="contact-details">
                  <h4>{method.title}</h4>
                  <p>{method.text}</p>
                </div>
              </motion.div>
            ))}
          </div>
          
          <div className="contact-form">
            <form onSubmit={handleSubmit}>
              <div className="form-group">
                <label htmlFor="name">姓名</label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  placeholder="请输入您的姓名"
                  value={formData.name}
                  onChange={handleInputChange}
                  required
                />
              </div>
              
              <div className="form-group">
                <label htmlFor="email">邮箱</label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  placeholder="请输入您的邮箱地址"
                  value={formData.email}
                  onChange={handleInputChange}
                  required
                />
              </div>
              
              <div className="form-group">
                <label htmlFor="message">留言</label>
                <textarea
                  id="message"
                  name="message"
                  placeholder="请输入您的留言内容"
                  rows={4}
                  value={formData.message}
                  onChange={handleInputChange}
                  required
                />
              </div>
              
              <button 
                type="submit" 
                className="contact-button"
                disabled={isSubmitting}
              >
                {isSubmitting ? '发送中...' : '发送消息'}
              </button>
            </form>
          </div>
        </motion.div>
      </div>

      {/* 通知提示 */}
      {showNotification && (
        <motion.div
          className={`notification notification-${notificationType}`}
          initial={{ opacity: 0, x: 100 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: 100 }}
        >
          <div className="notification-content">
            {notificationType === 'success' ? (
              <>
                <span>✓</span>
                <span>消息发送成功！我们会尽快回复您。</span>
              </>
            ) : (
              <>
                <span>✗</span>
                <span>请填写所有必填字段或检查邮箱格式。</span>
              </>
            )}
          </div>
        </motion.div>
      )}
    </section>
  )
}

export default Contact 